<script setup>
import { onMounted, reactive, ref } from "vue";
import { GETBLOGSLIST, DELETEBLOG } from "@/api/post";
import { Message } from "@arco-design/web-vue";
import mtz from "moment-timezone";
import { useRouter } from "vue-router";

const params = reactive({
  page_size: 10,
  page_num: 1,
  status: "", //draft
  keywords: "",
});
const data = ref([]);
const total = ref(0);
const router = useRouter();
//改变页数
const changeToPageNum = async (current, c) => {
  params.page_num = c.page;
  requestPage();
};

//改变每页
const changeToPageSize = async (pageSize) => {
  params.page_size = pageSize;
  requestPage();
};
//处理数据
const handleData = () => {
  for (let x of data.value) {
    if (x.created_at !== 0) {
      x.created_at = mtz(x.created_at * 1000)
        .tz("Asia/Shanghai")
        .format("YYYY-MM-DD HH:mm:ss");
    }
    if (x.pulished_at !== 0) {
      x.pulished_at = mtz(x.pulished_at * 1000)
        .tz("Asia/Shanghai")
        .format("YYYY-MM-DD HH:mm:ss");
    } else {
      x.pulished_at = "未发布";
    }
    if (x.updated_at !== 0) {
      x.updated_at = mtz(x.updated_at * 1000)
        .tz("Asia/Shanghai")
        .format("YYYY-MM-DD HH:mm:ss");
    }
    if (x.status === "draft") {
      x.status = "草稿";
    }
    if (x.status === "published") {
      x.status = "已发布";
    }
  }
};

//搜索按钮的加载状态开关
const searchLoading = ref(false);
//请求页面
const requestPage = async () => {
  try {
    await GETBLOGSLIST(params).then(
      (value) => {
        console.log(value);
        data.value = value.Msg.items;
        total.value = value.Msg.total;
        handleData();
      },
      (reason) => {
        // console.log(reason);
        Message.error(reason);
        data.value = [];
      }
    );
  } catch (error) {
    console.log(error);
    data.value = [];
  } finally {
    searchLoading.value = false;
  }
};
//挂在后请求博客列表
onMounted(requestPage);

//创建博客按钮触发事件
const handleCreateBlog = () => {
  router.push({
    name: "blogcreate",
  });
};

//搜索触发事件
const goToSearch = () => {
  searchLoading.value = true;
  requestPage();
};

//编辑触发事件
const goToEdit = (record) => {
  if (record.id && record.id != 0) {
    router.push(`/backstage/admin/update/${record.id}`);
  } else {
    Message.warning("未找到对应文章，请联系管理员");
  }
};

//删除触发事件
const goToDelete = async (record) => {
  try {
    if (record.id && record.id != 0) {
      await DELETEBLOG(record.id).then(
        () => {
          Message.success("删除成功");
          requestPage();
        },
        (reason) => {
          Message.error(reason);
        }
      );
    }
  } catch (error) {
    console.log(error);
  }
};

//查看按钮触发事件
const goToShow = (record) => {
  if (record.id && record.id != 0) {
    router.push(`/reception/blogs/${record.id}`);
  } else {
    Message.error("未找到响应的博客");
  }
};
</script>
<template>
  <div class="blogslist-fullpage">
    <!-- 头 -->
    <div class="blogslist-hander">
      <div class="blogslist-hander-left">
        <a-breadcrumb :style="{ fontSize: `18px` }">
          <a-breadcrumb-item>
            <icon-home :size="24" />
          </a-breadcrumb-item>
          <a-breadcrumb-item>博客列表</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="blogslist-hander-right">
        <div>
          <a-button type="primary" @click="handleCreateBlog">创建博客</a-button>
        </div>
        <div>
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="请输入标题..."
            search-button
            :loading="searchLoading"
            @search="goToSearch"
            @keyup.enter="goToSearch"
            v-model="params.keywords"
          />
        </div>
      </div>
    </div>
    <!-- 表部分 -->
    <div class="blogslist-context">
      <a-table
        :data="data"
        style="margin-top: 30px"
        :pagination="{
          total: total,
          // current: params.page_num,
          pagSize: params.page_size,
          size: 'large',
          showTotal: true,
          showJumper: true,
          showPageSize: true,
          pageSizeOptions: [2, 5, 8, 10, 20],
        }"
        @change="changeToPageNum"
        @pageSizeChange="changeToPageSize"
      >
        <template #columns>
          <a-table-column title="id" data-index="id"></a-table-column>
          <a-table-column title="标题" data-index="title"></a-table-column>
          <a-table-column title="简介" data-index="summary"></a-table-column>
          <a-table-column title="作者" data-index="author"></a-table-column>
          <a-table-column title="状态" data-index="status"></a-table-column>
          <a-table-column
            title="创建时间"
            data-index="created_at"
          ></a-table-column>
          <a-table-column
            title="更新时间"
            data-index="updated_at"
          ></a-table-column>
          <a-table-column
            title="发布时间"
            data-index="pulished_at"
          ></a-table-column>
          <a-table-column title="操作" align="center" :width="1">
            <template #cell="{ record }">
              <a-space>
                <a-button
                  type="primary"
                  status="success"
                  @click="goToShow(record)"
                  >查看</a-button
                >
                <a-button type="primary" @click="goToEdit(record)"
                  >编辑</a-button
                >
                <a-popconfirm
                  content="确定要删除这篇博客么?"
                  type="warning"
                  @ok="goToDelete(record)"
                >
                  <a-button type="text" status="danger">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style scoped>
.blogslist-fullpage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.blogslist-hander {
  display: flex;
  height: 80px;
  padding: 1% 0;
  flex-direction: column;
  align-items: flex-start;
}
.blogslist-hander-right {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 18px;
  align-items: center;
}
.blogslist-context {
  display: flex;
  height: 100%;
  /* width: 100%; */
  flex-direction: column;
}
</style>
